<!DOCTYPE html>
<html lang="en">
<head>
    <#include "/commonPage.html" />
    <style>
        .grid-panel .datagrid-btable tr {
            height: 120px;
        }
    </style>
    <script>
        $(function () {
            $('#editDevice').click(function () {
                var arr = $('#mydatagrid').datagrid('getChecked');
                if (arr.length == 0) {
                    $.messager.alert('提示', '请先选择一个要修改的订单!');
                    return;
                }
                if (arr.length > 1) {
                    $.messager.alert('提示', '只能选择一个要修改的订单!');
                    return;
                }
                var row = $('#mydatagrid').datagrid('getSelected');
                $('#win').window("open");
                $('#ff').form('load', row);

            })
            $('#deleteDevice').click(function () {
                deleteDevice();
            })
            $('#excel').click(function () {
                excel();
            })
            $('#ff').form({
                onLoadSuccess: function (data) {
                    var path = "/" + $('#picture').val();
                    console.log(path)
                    $('#pic').attr("src", path);
                }
            })
            $('#pic').click(function () {
                var path = "/" + $('#picture').val();
                $('#pic2').attr("src", path);
                $('#win2').window("open");
            })
            $('#strfinishtime').datetimebox({
                onChange: function (newValue, oldValue) {
                    var timestamp = getTimeStamp(newValue);
                    $('#finishtime').val(timestamp);
                }
            })
        })
    </script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:90px;">
    <div><h1 style="color:#133ad5">订单管理</h1></div>
    <div>
        <HR width="100%" color=#133ad5 SIZE=1>
    </div>
</div>
<div data-options="region:'center',border:false" style="padding:0">
    <div class="grid-panel" style="width: 100%;height: 100%">
        <table id="mydatagrid" class="easyui-datagrid" rownumbers="true" url="/order/list" pagination="true"
               striped="true"
               data-options="toolbar:'#tb',idField:'id',fit:true,fitColumns:true,onLoadSuccess:function(){$('#mydatagrid').datagrid('clearChecked');}">
            <thead>
            <tr style="height: 100px;">
                <th field="id" checkbox="true"></th>
                <th data-options="field:'billName',width:80">订单名称</th>
                <th data-options="field:'userName',width:80">经手人</th>
                <th data-options="field:'otime',width:80">下单时间</th>
                <th data-options="field:'ctime',width:80">预计完成时间</th>
                <th data-options="field:'specification',width:80">规格</th>
                <th data-options="field:'paper',width:80">纸张/材质</th>
                <th data-options="field:'technology',width:80">工艺</th>
                <th data-options="field:'quantity',width:50">数量</th>
                <th data-options="field:'unitPrice',width:50">单价(元)</th>
                <th data-options="field:'totalMoney',width:80">金额(元)</th>
                <th data-options="field:'received',width:80">已收款(元)</th>
                <th class="img" data-options="field:'picture',width:200" formatter="showpic">图片</th>
                <th data-options="field:'state',width:40" formatter="showmode">状态</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
<div id="tb">
    <div>
        <a id="editDevice" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改订单</a>
        <a id="deleteDevice" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true">删除订单</a>
        <a id="excel" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true">下载</a>
    </div>
    <div id="tbsearch" style="padding:3px">
        <span>名称:</span>
        <input id="name" name="name" style="line-height:26px;border:1px solid #ccc">
        <span>状态:</span>
        <input id="state" name="state" class="easyui-combobox" style="line-height:26px;border:1px solid #ccc"
               data-options="panelHeight:'auto',valueField:'id',textField:'text',url:'/json/levelsearch.json',method:'get'">
        <a href="#" class="easyui-linkbutton" plain="true" data-options="iconCls:'icon-search'"
           onclick="doSearch()">搜索</a>
    </div>
</div>
<div id="win2" class="easyui-window" title="图片详情" style="width:800px;height:600px;"
     data-options="iconCls:'icon-add',modal:true,minimizable:false,maximizable:false,collapsible:false,closed:true">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'center',border:false" style="padding: 10px;">
            <img id="pic2" style="width:700px;height:500px;">
        </div>
    </div>
</div>

<div id="win" class="easyui-window" title="修改订单" style="width:800px;height:600px;"
     data-options="iconCls:'icon-add',modal:true,minimizable:false,maximizable:false,collapsible:false,closed:true">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'center',border:false" style="padding: 10px;">
            <form id="ff" method="post" style="margin-top: 20px">
                <table style="width: 100%;height: 100%">
                    <tr>
                        <td height="50px" style="width: 50%"><input name="bId" type="hidden">
                            <input class="easyui-textbox" name="billName" style="width:100%"
                                   data-options="label:'订单名称:',labelPosition:'left',labelWidth:100,prompt:'输入订单的名称',required:true">
                        </td>
                        <td height="50px" style="width: 50%"><input class="easyui-textbox" name="specification"
                                                                    style="width:100%;"
                                                                    data-options="label:'规格:',labelPosition:'left',labelWidth:60,prompt:'输入规格'">
                        </td>
                    </tr>
                    <tr>
                        <td height="50px" style="width: 50%"><input class="easyui-textbox" name="paper"
                                                                    style="width:100%"
                                                                    data-options="label:'纸张/材质:',labelPosition:'left',labelWidth:100,prompt:'输入纸张/材质'">
                        </td>
                        <td height="50px" style="width: 50%"><input class="easyui-textbox" name="technology"
                                                                    style="width:100%"
                                                                    data-options="label:'工艺:',labelPosition:'left',labelWidth:60,prompt:'输入工艺'">
                        </td>
                    </tr>
                    <tr>
                        <td height="50px" style="width: 50%"><input class="easyui-textbox" name="quantity"
                                                                    style="width:100%"
                                                                    data-options="label:'数量:',labelPosition:'left',labelWidth:100,prompt:'输入数量'">
                        </td>
                        <td height="50px" style="width: 50%"><input class="easyui-textbox" name="unitPrice"
                                                                    style="width:100%"
                                                                    data-options="label:'单价:',labelPosition:'left',labelWidth:60,prompt:'输入单价'">
                        </td>
                    </tr>
                    <tr>
                        <td height="50px" style="width: 50%"><input class="easyui-textbox" name="totalMoney"
                                                                    style="width:100%"
                                                                    data-options="label:'总金额:',labelPosition:'left',labelWidth:100,prompt:'输入总金额',required:true">
                        </td>
                        <td height="50px" style="width: 50%"><input class="easyui-textbox" name="received" value="0"
                                                                    style="width:100%"
                                                                    data-options="label:'已收款:',labelPosition:'left',labelWidth:60,prompt:'输入已收款'">
                        </td>
                    </tr>
                    <!--                    <tr>-->
                    <!--                        <td height="40px" style="width: 50%">-->
                    <!--                            <label class="textbox-label textbox-label-left"-->
                    <!--                                   style="text-align: left; width: 100px; height: 30px; line-height: 30px;">提交时间:</label>-->
                    <!--                            <input id="orderTime" class="easyui-datetimebox" name="orderTime" style="width:50%"-->
                    <!--                                   data-options="required:true">-->
                    <!--                        </td>-->
                    <!--                        <td height="40px" style="width: 50%">-->
                    <!--                            <label class="textbox-label textbox-label-left"-->
                    <!--                                   style="float:left;text-align: left; width: 100px; height: 30px; line-height: 30px;">预计完成时间:</label>-->
                    <!--                            <input id="completionTime" class="easyui-datetimebox" name="completionTime" style="width:50%"-->
                    <!--                                   data-options="required:true">-->
                    <!--                        </td>-->
                    <!--                    </tr>-->
                    <tr>
                        <td height="50px" style="width: 50%"><input class="easyui-textbox" name="userName" value="0"
                                                                    style="width:100%"
                                                                    data-options="label:'经手人:',labelPosition:'left',labelWidth:60,prompt:'经手人账号'">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" height="50px" style="width: 100%; ">
                            <p style="text-align: left; width: 100px; height: 30px; line-height: 30px;">
                                图片:</p>
                            <input id="picture" type="hidden" name="picture">
                            <img id="pic" style="width: 300px;height: 200px;float: left">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
            <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)"
               onclick="addDevicefunction()" style="width:80px">保存</a>
            <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)"
               onclick="closewin()" style="width:80px">退出</a>
        </div>
    </div>
</div>
<script>

    function addDevicefunction() {
        $('#ff').form('submit', {
            url: '/order/update',
            success: function (data) {
                if (data == "成功") {
                    $.messager.alert('Info', data, 'info');
                    $('#ff').form('clear');
                    $('#win').window("close");
                    $('#mydatagrid').datagrid("reload");
                } else {
                    $.messager.alert('错误', data, 'error');
                }
            }
        })
    }


    function doSearch() {
        $('#mydatagrid').datagrid('load', {
            name: $('#name').val(),
            state: $('#state').val()
        });
    }

    function getdatagridchecked() {
        var arr = $('#mydatagrid').datagrid('getSelections');
        var ids = [];
        for (var i in arr) {
            ids.push(arr[i].bId);
        }
        ids = ids.join(",");
        return ids;
    }

    function deleteDevice() {
        ids = getdatagridchecked();
        if (ids.length == 0) {
            $.messager.alert('提示', '请先选择要放入回收站的订单!');
            return;
        }
        $.messager.confirm('确认', '是否将选中的订单放入回收站？', function (r) {
            if (r) {
                $.post('/order/update2', {ids: ids}, function (data) {
                    if (data == "成功") {
                        $.messager.alert('提示', '已放入回收站!', undefined, function () {
                            $("#mydatagrid").datagrid("reload");
                            $("#mydatagrid").datagrid("uncheckAll");
                        });
                    } else {
                        $.messager.alert('错误', data, 'error');
                    }
                })
            }
        });
    }


    function showpic(value, row) {
        if (value != undefined) {
            return "<img class='img' style='width: 200px' height='120px' src='/" + value + "'/>";
        }
        return value;
    }

    function showmode(value, row, index) {
        if (row.state == 1) {
            return "已完结";
        } else {
            return "未完结";
        }
    }

    function excel() {
        $('#mydatagrid').datagrid({
            url: "/order/excel",
            pageSize: 10,
            queryParams: {
                billName: "",
                userName: "",
                otime: "",
                ctime: "",
                specification: "",
                paper: "",
                technology: "",
                quantity: 10,
                unitPrice: 10,
                totalMoney: 10,
                received: 10,
                state: 10,
                picture: 10
            },
            onBeforeLoad: function (param) {
                console.log(param);
            },
            onLoadSuccess: function (data) {
                console.log(data);
            },
            onLoadError: function () {
                console.log(1);
            }
        });
    }


</script>
</body>

</html>